<!-- 首页 -->
<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="content">每日置顶推荐</block></cu-custom>
		<view class="search-box">
			<u-search placeholder="输入编号" v-model="keyword" @search="query" @custom="query" maxlength="10"></u-search>
		</view>
		<view class="card-list">
			<view class="card-box" v-for="(item, index) in dataList" :key="index">
				<view class="card">
					<view class="image-box" @click="detail(item)">
						<image class="card-image" mode="aspectFill" :src="item.image"></image>
						<view class="card-no">{{item.id}}号</view>
					</view>
					<view class="card-name">
						<view class="nickname">{{item.nickName}}</view>
						<view class="city-text">{{item.city}}</view>
					</view>
					<view class="card-check">
						<view>
							<u-checkbox-group>
								<u-checkbox v-model="item.checked" active-color="#d90891"></u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="vote-text">{{item.voteNum}}票</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="loadmore-box" v-if="dataList.length > 0">
			<u-loadmore :status="status" @loadmore="load"></u-loadmore>
		</view>
		
		<view class="tool-box">
			<view class="share-btn" @click="home">
				<u-icon name="home" color="#d90891" size="36"></u-icon>
				<view class="share-text">首页</view>
			</view>
			<u-button :custom-style="customStyle" :hair-line="false" open-type="share">
				<u-icon name="fenxiang" custom-prefix="iconfont" color="#d90891" size="42"></u-icon>
				<view class="share-text">分享</view>
			</u-button>
			<view class="btn-right">
				<view class="btn" @click="addVote">申请推荐</view>
				<view class="btn" @click="addVoteUser">立即投票</view>
			</view>
		</view>
		
		<u-back-top :scrollTop="scrollTop"></u-back-top>
		<user-auth></user-auth>
	</view>
</template>

<script>
export default {
	data() {
		return {
			status: 'loadmore',
			isEnd: false,
			current: 1,
			pageSize: 10,
			scrollTop: 0,
			dataList: [],
			uid: '',
			keyword: '',
			customStyle: {
				margin: '0',
				display: 'flex',
				flexDirection: 'column',
				lineHeight: 'unset',
				border: '0',
				padding: '0',
			},
		};
	},
	onLoad(option) {
		if(option.shareUserId){
			this.$u.vuex('vuex_share_id', option.shareUserId);
		}
		this.init();
		this.getUid();
	},
	onReachBottom() {
		this.load();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onShareAppMessage(res) {
		return {
			title: '正在参加全国男神女神评选大赛，快来帮我投票吧！',
			path: '/packgeMine/pages/vote/game/index?shareUserId='+this.vuex_user.userId,
		};
	},
	onShareTimeline() {
		return {
			title: '正在参加全国男神女神评选大赛，快来帮我投票吧！',
			path: '/packgeMine/pages/vote/game/index?shareUserId='+this.vuex_user.userId,
		};
	},
	methods: {
		init() {
			var _this = this;
			uni.$on('update',function(e){
				_this.dataList.unshift(e);
			})
			_this.query();
		},
		getUid() {
			this.$u.get('/wq/vote/getUid').then(res => {
				this.uid = res.msg;
			})
		},
		load() {
			this.loadmore();
		},
		home() {
			uni.switchTab({
				url: '/pages/index/world/index'
			});
		},
		detail(item) {
			this.$u.route({
				url: 'packgeMine/pages/vote/game/detail',
				params: {
					id: item.id,
				}
			});
		},
		async loadmore() {
			this.status = 'loading';
			if(this.isEnd){
				this.status = 'nomore';
				return;
			}
			var res = await this.getDataList();
			this.dataList = this.dataList.concat(res.rows);
		},
		query() {
			this.current = 1;
			this.isEnd = false;
			this.status = 'loadmore';
			this.loadquery();
		},
		async loadquery() {
			var res = await this.getDataList();
			this.dataList = res.rows;
		},
		async getDataList() {
			if(isNaN(Number(this.keyword))){
				return;
			}
			var res = await this.$u.get('/wq/vote/list', {
				id: this.keyword,
				pageNum: this.current,
				pageSize: this.pageSize,
			});
			var totalPage = Math.ceil(res.total/this.pageSize);
			this.pages = totalPage;
			this.current ++;
			this.status = 'loadmore';
			if(this.current > this.pages){
				this.status = 'nomore';
				this.isEnd = true;
			}
			return res;
		},
		addVote() {
			this.$u.vuex('vuex_login_to', false);
			this.judgeLogin(() => {
				this.$u.route({
					url: 'packgeMine/pages/vote/game/add',
				});
			});
		},
		clearCheck() {
			for(var i=0;i<this.dataList.length;i++){
				this.dataList[i].checked = false;
			}
		},
		addVoteUser() {
			this.$u.vuex('vuex_login_to', false);
			var ids = [];
			for(var i=0;i<this.dataList.length;i++){
				var vote = this.dataList[i];
				if(vote.checked){
					ids.push(vote.id);
				}
			}
			
			this.$u.post('/wq/voteUser/addBatch',{
				uid: this.uid,
				voteIds: ids.join(','),
			}).then(res => {
				this.clearCheck();
				this.getUid();
				this.$u.toast("投票成功");
			});
		},
	}
}; 
</script>
<style lang="scss">
	page {
		background-color: #f5efef;
	}
	.card-list {
		display: flex;
		flex-wrap: wrap;
		padding: 5px;
	}
	.loadmore-box {
		padding-bottom: 100px;
	}
	.card {
		background-color: #fff;
		border-radius: 5px;
	}
	.card-image {
		width: 100%;
		height: 400rpx;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	.card-box {
		display: flex;
		flex-direction: column;
		width: 50%;
		padding: 5px;
	}
	.card-name {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 10px;
	}
	.image-box {
		position: relative;
	}
	.search-box {
		background-color: #fff;
		padding: 5px 15px;
	}
	.card-no {
		position: absolute;
		top: 0;
		background-color: #d90891;
		color: #fff;
		padding: 5px 10px;
		border-top-left-radius: 5px;
		border-bottom-right-radius: 5px;
		font-size: 24rpx;
	}
	.card-check {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 10px;
		padding-bottom: 15px;
	}
	.vote-text {
		font-size: 30rpx;
		color: #d90891;
	}
	.city-text {
		font-size: 30rpx;
		color: #802eae;
	}
	.nickname {
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100px;
	}
	.tool-box {
		display: flex;
		position: fixed;
		bottom: 0;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background-color: #fff;
		padding: 5px 15px;
		box-shadow: 0px -2px 20px 0px #d90891;
		z-index: 9999;
	}
	.btn-right {
		display: flex;
	}
	.btn {
		background-color: #d90891;
		padding: 10px 20px;
		color: #fff;
		margin-left: 15px;
		font-size: 30rpx;
		border-radius: 20px;
	}
	.share-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		line-height: unset;
		margin: 0;
		padding: 0;
	}
	.share-text {
		font-size: 26rpx;
	}
</style>
